<!DOCTYPE html>
<html lang="en-gb" dir="ltr">

    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Table - UIkit tests</title>
        <script src="js/test.js"></script>
    </head>

    <body>

        <div class="uk-container">

            <h1>Table</h1>

            <div class="uk-margin">
                <select id="js-size-switcher" class="uk-select uk-form-width-small" aria-label="Size switcher">
                    <option value="">Default</option>
                    <option value="uk-table-small">Small</option>
                    <option value="uk-table-large">Large</option>
                </select>
                <button class="uk-button uk-button-default" type="button" uk-toggle="target: .uk-table; cls: uk-table-justify">Justify</button>
            </div>

            <div class="uk-overflow-auto">
                <table class="uk-table uk-table-hover">
                    <caption>Table caption</caption>
                    <thead>
                        <tr>
                            <th>Table Heading</th>
                            <th>Table Heading</th>
                            <th>Table Heading</th>
                            <th>Table Heading</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>Table Data <a href="#">a element</a> <code>.uk-table</code></td>
                            <td>Table Data <a class="uk-button uk-button-primary" href="#">Button</a></td>
                            <td>Table Data <img src="images/photo.jpg" width="40" height="27" alt=""></td>
                            <td>Table Data</td>
                        </tr>
                        <tr>
                            <td>Table Data</td>
                            <td>Table Data</td>
                            <td>Table Data</td>
                            <td>Table Data</td>
                        </tr>
                        <tr class="uk-active">
                            <td>Active Row</td>
                            <td>Active Row</td>
                            <td>Active Row</td>
                            <td>Active Row</td>
                        </tr>
                        <tr>
                            <td>Table Data</td>
                            <td>Table Data</td>
                            <td>Table Data</td>
                            <td>Table Data</td>
                        </tr>
                        <tr>
                            <th>Table Sub Heading</th>
                            <th>Table Sub Heading</th>
                            <th>Table Sub Heading</th>
                            <th>Table Sub Heading</th>
                        </tr>
                        <tr>
                            <td>Table Data</td>
                            <td>Table Data</td>
                            <td>Table Data</td>
                            <td>Table Data</td>
                        </tr>
                        <tr>
                            <td>Table Data</td>
                            <td>Table Data</td>
                            <td>Table Data</td>
                            <td>Table Data</td>
                        </tr>
                    </tbody>
                    <tfoot>
                        <tr>
                            <td>Table Footer</td>
                            <td>Table Footer</td>
                            <td>Table Footer</td>
                            <td>Table Footer</td>
                        </tr>
                    </tfoot>
                </table>
            </div>

            <h2>Table Divider</h2>

            <div class="uk-overflow-auto">
                <table class="uk-table uk-table-divider uk-table-hover">
                    <thead>
                        <tr>
                            <th>Table Heading</th>
                            <th>Table Heading</th>
                            <th>Table Heading</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>Table Data <a href="#">a element</a> <code>.uk-table</code></td>
                            <td>Table Data <a class="uk-button uk-button-primary" href="#">Button</a></td>
                            <td>Table Data <img src="images/photo.jpg" width="40" height="27" alt=""></td>
                        </tr>
                        <tr>
                            <td>Table Data</td>
                            <td>Table Data</td>
                            <td>Table Data</td>
                        </tr>
                        <tr class="uk-active">
                            <td>Active Row</td>
                            <td>Active Row</td>
                            <td>Active Row</td>
                        </tr>
                        <tr>
                            <td>Table Data</td>
                            <td>Table Data</td>
                            <td>Table Data</td>
                        </tr>
                        <tr>
                            <th>Table Sub Heading</th>
                            <th>Table Sub Heading</th>
                            <th>Table Sub Heading</th>
                        </tr>
                        <tr>
                            <td>Table Data</td>
                            <td>Table Data</td>
                            <td>Table Data</td>
                        </tr>
                        <tr>
                            <td>Table Data</td>
                            <td>Table Data</td>
                            <td>Table Data</td>
                        </tr>
                    </tbody>
                </table>
            </div>

            <h2>Table Striped</h2>

            <div class="uk-overflow-auto">
                <table class="uk-table uk-table-striped uk-table-hover ">
                    <thead>
                        <tr>
                            <th>Table Heading</th>
                            <th>Table Heading</th>
                            <th>Table Heading</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>Table Data <a href="#">a element</a> <code>.uk-table</code></td>
                            <td>Table Data <a class="uk-button uk-button-primary" href="#">Button</a></td>
                            <td>Table Data <img src="images/photo.jpg" width="40" height="27" alt=""></td>
                        </tr>
                        <tr>
                            <td>Table Data</td>
                            <td>Table Data</td>
                            <td>Table Data</td>
                        </tr>
                        <tr class="uk-active">
                            <td>Active Row</td>
                            <td>Active Row</td>
                            <td>Active Row</td>
                        </tr>
                        <tr>
                            <td>Table Data</td>
                            <td>Table Data</td>
                            <td>Table Data</td>
                        </tr>
                        <tr>
                            <th>Table Sub Heading</th>
                            <th>Table Sub Heading</th>
                            <th>Table Sub Heading</th>
                        </tr>
                        <tr>
                            <td>Table Data</td>
                            <td>Table Data</td>
                            <td>Table Data</td>
                        </tr>
                        <tr>
                            <td>Table Data</td>
                            <td>Table Data</td>
                            <td>Table Data</td>
                        </tr>
                    </tbody>
                </table>
            </div>

            <h2>Widths</h2>

            <div class="uk-overflow-auto">
                <table class="uk-table uk-table-divider uk-table-hover">
                    <thead>
                        <tr>
                            <th class="uk-table-shrink"></th>
                            <th class="uk-table-shrink"></th>
                            <th class="uk-table-expand">Expand</th>
                            <th class="uk-width-small">Truncate</th>
                            <th class="uk-width-medium">Width Medium</th>
                            <th class="uk-table-shrink uk-text-nowrap">Shrink + Nowrap</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td><input class="uk-checkbox" type="checkbox" aria-label="Checkbox"></td>
                            <td><img class="uk-preserve-width uk-border-circle" src="images/avatar.jpg" width="40" height="40" alt=""></td>
                            <td class="uk-table-link">
                                <a class="uk-link-reset" href="">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</a>
                            </td>
                            <td class="uk-text-truncate">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</td>
                            <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td>
                            <td class="uk-text-nowrap">Lorem ipsum dolor</td>
                        </tr>
                        <tr>
                            <td><input class="uk-checkbox" type="checkbox" aria-label="Checkbox"></td>
                            <td><img class="uk-preserve-width uk-border-circle" src="images/avatar.jpg" width="40" height="40" alt=""></td>
                            <td class="uk-table-link">
                                <a class="uk-link-reset" href="">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</a>
                            </td>
                            <td class="uk-text-truncate">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</td>
                            <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td>
                            <td class="uk-text-nowrap">Lorem ipsum dolor</td>
                        </tr>
                        <tr>
                            <td><input class="uk-checkbox" type="checkbox" aria-label="Checkbox"></td>
                            <td><img class="uk-preserve-width uk-border-circle" src="images/avatar.jpg" width="40" height="40" alt=""></td>
                            <td class="uk-table-link">
                                <a class="uk-link-reset" href="">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</a>
                            </td>
                            <td class="uk-text-truncate">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</td>
                            <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td>
                            <td class="uk-text-nowrap">Lorem ipsum dolor</td>
                        </tr>
                        <tr>
                            <td><input class="uk-checkbox" type="checkbox" aria-label="Checkbox"></td>
                            <td><img class="uk-preserve-width uk-border-circle" src="images/avatar.jpg" width="40" height="40" alt=""></td>
                            <td class="uk-table-link">
                                <a class="uk-link-reset" href="">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</a>
                            </td>
                            <td class="uk-text-truncate">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</td>
                            <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td>
                            <td class="uk-text-nowrap">Lorem ipsum dolor</td>
                        </tr>
                    </tbody>
                </table>
            </div>

            <h2>Responsive</h2>

            <div class="uk-overflow-auto">
                <table class="uk-table uk-table-divider uk-table-hover uk-table-responsive">
                    <thead>
                        <tr>
                            <th class="uk-table-shrink"></th>
                            <th class="uk-table-shrink"></th>
                            <th class="uk-table-expand">Expand</th>
                            <th class="uk-width-small">Truncate</th>
                            <th class="uk-width-medium">Width Medium</th>
                            <th class="uk-table-shrink uk-text-nowrap">Shrink + Nowrap</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td><input class="uk-checkbox" type="checkbox" aria-label="Checkbox"></td>
                            <td><img class="uk-preserve-width uk-border-circle" src="images/avatar.jpg" width="40" height="40" alt=""></td>
                            <td class="uk-table-link">
                                <a class="uk-link-reset" href="">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</a>
                            </td>
                            <td class="uk-text-truncate">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</td>
                            <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td>
                            <td class="uk-text-nowrap">Lorem ipsum dolor</td>
                        </tr>
                        <tr>
                            <td><input class="uk-checkbox" type="checkbox" aria-label="Checkbox"></td>
                            <td><img class="uk-preserve-width uk-border-circle" src="images/avatar.jpg" width="40" height="40" alt=""></td>
                            <td class="uk-table-link">
                                <a class="uk-link-reset" href="">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</a>
                            </td>
                            <td class="uk-text-truncate">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</td>
                            <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td>
                            <td class="uk-text-nowrap">Lorem ipsum dolor</td>
                        </tr>
                        <tr>
                            <td><input class="uk-checkbox" type="checkbox" aria-label="Checkbox"></td>
                            <td><img class="uk-preserve-width uk-border-circle" src="images/avatar.jpg" width="40" height="40" alt=""></td>
                            <td class="uk-table-link">
                                <a class="uk-link-reset" href="">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</a>
                            </td>
                            <td class="uk-text-truncate">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</td>
                            <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td>
                            <td class="uk-text-nowrap">Lorem ipsum dolor</td>
                        </tr>
                        <tr>
                            <td><input class="uk-checkbox" type="checkbox" aria-label="Checkbox"></td>
                            <td><img class="uk-preserve-width uk-border-circle" src="images/avatar.jpg" width="40" height="40" alt=""></td>
                            <td class="uk-table-link">
                                <a class="uk-link-reset" href="">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</a>
                            </td>
                            <td class="uk-text-truncate">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</td>
                            <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td>
                            <td class="uk-text-nowrap">Lorem ipsum dolor</td>
                        </tr>
                    </tbody>
                </table>
            </div>

        </div>

        <script>

            const {$$, addClass, on, removeClass } = UIkit.util;

            on('#js-size-switcher', 'change', (e) => {
                const options = $$('option', e.target).map(({value}) => value);
                for (const el of $$('.uk-table')) {
                    removeClass(el, options);
                    addClass(el, e.target.value);
                }
            });

        </script>

    </body>
</html>
